<!--
 * @Descripttion: 
 * @Author: Wang Dejiang(aei)
 * @Date: 2022-07-31 19:35:42
 * @LastEditors: Wang Dejiang(aei)
 * @LastEditTime: 2022-07-31 20:02:38
-->
<template>
  <div>
    <!-- <NavBar /> -->
    <!-- <router-view :key="$route.fullPath" /> -->
    <h1>a sweet home for {{ user.user.name }}</h1>
    <!-- 1.module name 2.state -->
    <BlogCard
      v-for="blogpost in blogpost.blogposts"
      :key="blogpost.id"
      :blogpost="blogpost"
    />
  </div>
</template>

<script>
import BlogCard from "@/components/Blog/BlogCard.vue";
import { mapState } from "vuex";
import store from "@/store/store";
import NavBar from "@/components/Blog/NavBar.vue";

function getBlogs(routeTo, next) {
  store.dispatch("blogpost/fetchBlogs").then(() => {
    next();
  });
}

export default {
  components: {
    BlogCard,
    NavBar,
  },
  beforeRouteEnter(routeTo, routeFrom, next) {
    getBlogs(routeTo, next);
  },
  beforeRouteUpdate(routeTo, routeFrom, next) {
    getBlogs(routeTo, next);
  },
  computed: {
    ...mapState(["blogpost", "user"]),
  },
};
</script>
